<!--
 * @Description:
 * @Author 卞鹏飞 <228443632@qq.com>
 * @create 18/08/24 6:51 PM
 -->
<!--default-->
<script>
export default { name: 'Demo' }
</script>
<!--setup-->
<script setup>
import { onMounted, getCurrentInstance, ref } from 'vue'
import BaseQueryTable from '@shared/base/base-query-table'
import demoApi from '@/api/modules/demo'
import { ElMessage } from 'element-plus'
import { to } from 'sf-utils2'

const { proxy } = getCurrentInstance()
const props = defineProps({})
const emit = defineEmits([])

/* 状态 */
const baseQueryTableRef = ref()

const onQuery = async (mark, life) => {
  console.log('life', life)
  const [res, err] = await to(demoApi.mockTableData({ data: { ...mark } }))
  if (err || res?.code !== 200) return ElMessage.error(res?.message || String(err))
  console.log('params, ', res?.data)
  tableInfo.value.data = res?.data?.dataList || []

  return {
    dataList: res?.data?.dataList || [],
    mark: {
      ...mark,
      total: res?.data?.total
    }
  }
}

const tableInfo = ref({
  data: [],
  columns: [
    { label: '#', prop: '', fixed: 'left', type: 'index', width: '70px' },
    { label: '工号', name: 'empCode', fixed: 'left', minWidth: '120px' },
    { label: '员工名称', prop: 'empName', fixed: 'left', minWidth: '120px', slot: true },
    { label: '角色', prop: 'roleName', minWidth: '160px', slot: true },
    { label: '手机号码', prop: 'mobile', minWidth: '120px' },
    { label: '状态', minWidth: '80px', slot: true },
    { label: '部门', prop: '_deptName', minWidth: '300px', slot: true, showOverflowTooltip: false },
    { label: '创建时间', prop: '_createTime', minWidth: '160px' },
    {
      label: '操作',
      fixed: 'right',
      width: '160px',
      slot: true
    }
  ],
  isViewportFitHeight: true,
  viewportFitHeightField: 'height'
})

/* 方法 */

/* 计算 */

/* 监听 */

/* 周期 */
onMounted(() => {
  window.baseQueryTableRef = baseQueryTableRef
  console.log('baseQueryTableRef', baseQueryTableRef)
})

/* 暴露 */
defineExpose({
  $: proxy.$
})
</script>

<!--render-->
<template>
  <div class="page">
    <!-- 内容区 -->
    <BaseQueryTable
      ref="baseQueryTableRef"
      v-bind="tableInfo"
      @query="onQuery"
    />
  </div>
</template>

<!--style-->
<style scoped lang="less">
.page {
  width: 100%;
}
</style>
